import React, { memo, useEffect, shallowequal,useRef,useState,useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Carousel } from 'antd';
import { getTopBannersAction } from '../../store/actionCreactor'
import { BannerWrap, BannerLeft, BannerRight, BannerControl } from './style'
export default memo(function HNTopBanners() {

    const [currentIndex,setCurrnetIndex] = useState(0);

    const dispatch = useDispatch();
    const { topBanners } = useSelector(state => ({
        //topBanners : state.get("recommend").get("topBanners")
        //另一种写法
        topBanners: state.getIn(["recommend", "topBanners"])
    }), shallowequal);
    useEffect(() => {
        dispatch(getTopBannersAction());
    }, [dispatch]);
    const bannerRef = useRef();

    const imageBg = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl+"?imageView&blur=40x20");
    const bannerChange = useCallback((from , to) => {
        setCurrnetIndex(to);
    },[])

    return (
        <BannerWrap imageBg={imageBg}>
            <div className="banner wrap-v2">
                <BannerLeft>
                    <Carousel effect="fade" autoplay ref={bannerRef} beforeChange={bannerChange}>
                        {
                            topBanners.map((item,index)=>{
                                return(
                                    <div className="banner-item" key={item.imageUrl}>
                                        <img src={item.imageUrl} alt={item.typeTitle}/>
                                    </div>
                                )
                            })
                        }
                    </Carousel>
                </BannerLeft>
                <BannerRight>
                </BannerRight>
                <BannerControl>
                    <button className="btn left" onClick={e=>{bannerRef.current.prev()}}></button>
                    <button className="btn right" onClick={e=>{bannerRef.current.next()}}></button>
                </BannerControl>
            </div>
        </BannerWrap>
    )
})
